<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Contact layout example - UIkit documentation</title>
        <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
        <link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon.png">
        <link rel="stylesheet" href="css/uikit.docs.min.css">
        <script src="../vendor/jquery.js"></script>
        <script src="js/uikit.min.js"></script>
    </head>

    <body>

        <div class="uk-container uk-container-center uk-margin-top uk-margin-large-bottom">

            <nav class="uk-navbar uk-margin-large-bottom">
                <a class="uk-navbar-brand uk-hidden-small" href="layouts_frontpage.html">Brand</a>
                <ul class="uk-navbar-nav uk-hidden-small">
                    <li>
                        <a href="layouts_frontpage.html">Frontpage</a>
                    </li>
                    <li>
                        <a href="layouts_portfolio.html">Portfolio</a>
                    </li>
                    <li>
                        <a href="layouts_blog.html">Blog</a>
                    </li>
                    <li>
                        <a href="layouts_documentation.html">Documentation</a>
                    </li>
                    <li class="uk-active">
                        <a href="layouts_contact.html">Contact</a>
                    </li>
                    <li>
                        <a href="layouts_login.html">Login</a>
                    </li>
                </ul>
                <a href="#offcanvas" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>
                <div class="uk-navbar-brand uk-navbar-center uk-visible-small">Brand</div>
            </nav>

            <div class="uk-grid" data-uk-grid-margin>
                <div class="uk-width-1-1 uk-text-center">
                    <h1 class="uk-heading-large">Contact</h1>
                    <p class="uk-text-large">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.</p>
                </div>
            </div>

            <div class="uk-grid" data-uk-grid-margin>
                <div class="uk-width-medium-1-4 uk-push-1-4 uk-text-center">
                     <div class="uk-thumbnail uk-overlay-hover uk-border-circle">
                        <figure class="uk-overlay">
                            <img class="uk-border-circle" width="250" height="250" src="" alt="">
                            <figcaption class="uk-overlay-panel uk-overlay-background uk-flex uk-flex-center uk-flex-middle uk-text-center uk-border-circle">
                                <div>
                                    <a href="#" class="uk-icon-button uk-icon-envelope"></a>
                                    <a href="#" class="uk-icon-button uk-icon-twitter"></a>
                                    <a href="#" class="uk-icon-button uk-icon-google-plus"></a>
                                </div>
                            </figcaption>
                        </figure>
                    </div>
                    <h2 class="uk-margin-bottom-remove">Name</h2>
                    <p class="uk-text-large uk-margin-top-remove uk-text-muted">Job Description</p>
                </div>

                <div class="uk-width-medium-1-4 uk-push-1-4 uk-text-center">
                    <div class="uk-thumbnail uk-overlay-hover uk-border-circle">
                        <figure class="uk-overlay">
                            <img class="uk-border-circle" width="250" height="250" src="" alt="">
                            <figcaption class="uk-overlay-panel uk-overlay-background uk-flex uk-flex-center uk-flex-middle uk-text-center uk-border-circle">
                                <div>
                                    <a href="#" class="uk-icon-button uk-icon-envelope"></a>
                                    <a href="#" class="uk-icon-button uk-icon-twitter"></a>
                                    <a href="#" class="uk-icon-button uk-icon-google-plus"></a>
                                </div>
                            </figcaption>
                        </figure>
                    </div>
                    <h2 class="uk-margin-bottom-remove">Name</h2>
                    <p class="uk-text-large uk-margin-top-remove uk-text-muted">Job Description</p>
                </div>
            </div>

            <div class="uk-grid" data-uk-grid-margin>
                <div class="uk-width-medium-1-5 uk-text-center">
                    <div class="uk-thumbnail uk-overlay-hover uk-border-circle">
                        <figure class="uk-overlay">
                            <img class="uk-border-circle" width="200" height="200" src="" alt="">
                            <figcaption class="uk-overlay-panel uk-overlay-background uk-flex uk-flex-center uk-flex-middle uk-text-center uk-border-circle">
                                <div>
                                    <a href="#" class="uk-icon-button uk-icon-envelope"></a>
                                    <a href="#" class="uk-icon-button uk-icon-twitter"></a>
                                    <a href="#" class="uk-icon-button uk-icon-google-plus"></a>
                                </div>
                            </figcaption>
                        </figure>
                    </div>
                    <h2 class="uk-margin-bottom-remove">Name</h2>
                    <p class="uk-text-large uk-margin-top-remove uk-text-muted">Job Description</p>
                </div>

                <div class="uk-width-medium-1-5 uk-text-center">
                    <div class="uk-thumbnail uk-overlay-hover uk-border-circle">
                        <figure class="uk-overlay">
                            <img class="uk-border-circle" width="200" height="200" src="" alt="">
                            <figcaption class="uk-overlay-panel uk-overlay-background uk-flex uk-flex-center uk-flex-middle uk-text-center uk-border-circle">
                                <div>
                                    <a href="#" class="uk-icon-button uk-icon-envelope"></a>
                                    <a href="#" class="uk-icon-button uk-icon-twitter"></a>
                                    <a href="#" class="uk-icon-button uk-icon-google-plus"></a>
                                </div>
                            </figcaption>
                        </figure>
                    </div>
                    <h2 class="uk-margin-bottom-remove">Name</h2>
                    <p class="uk-text-large uk-margin-top-remove uk-text-muted">Job Description</p>
                </div>
                <div class="uk-width-medium-1-5 uk-text-center">
                    <div class="uk-thumbnail uk-overlay-hover uk-border-circle">
                        <figure class="uk-overlay">
                            <img class="uk-border-circle" width="200" height="200" src="" alt="">
                            <figcaption class="uk-overlay-panel uk-overlay-background uk-flex uk-flex-center uk-flex-middle uk-text-center uk-border-circle">
                                <div>
                                    <a href="#" class="uk-icon-button uk-icon-envelope"></a>
                                    <a href="#" class="uk-icon-button uk-icon-twitter"></a>
                                    <a href="#" class="uk-icon-button uk-icon-google-plus"></a>
                                </div>
                            </figcaption>
                        </figure>
                    </div>
                    <h2 class="uk-margin-bottom-remove">Name</h2>
                    <p class="uk-text-large uk-margin-top-remove uk-text-muted">Job Description</p>
                </div>

                <div class="uk-width-medium-1-5 uk-text-center">
                    <div class="uk-thumbnail uk-overlay-hover uk-border-circle">
                        <figure class="uk-overlay">
                            <img class="uk-border-circle" width="200" height="200" src="" alt="">
                            <figcaption class="uk-overlay-panel uk-overlay-background uk-flex uk-flex-center uk-flex-middle uk-text-center uk-border-circle">
                                <div>
                                    <a href="#" class="uk-icon-button uk-icon-envelope"></a>
                                    <a href="#" class="uk-icon-button uk-icon-twitter"></a>
                                    <a href="#" class="uk-icon-button uk-icon-google-plus"></a>
                                </div>
                            </figcaption>
                        </figure>
                    </div>
                    <h2 class="uk-margin-bottom-remove">Name</h2>
                    <p class="uk-text-large uk-margin-top-remove uk-text-muted">Job Description</p>
                </div>

                <div class="uk-width-medium-1-5 uk-text-center">
                    <div class="uk-thumbnail uk-overlay-hover uk-border-circle">
                        <figure class="uk-overlay">
                            <img class="uk-border-circle" width="200" height="200" src="" alt="">
                            <figcaption class="uk-overlay-panel uk-overlay-background uk-flex uk-flex-center uk-flex-middle uk-text-center uk-border-circle">
                                <div>
                                    <a href="#" class="uk-icon-button uk-icon-envelope"></a>
                                    <a href="#" class="uk-icon-button uk-icon-twitter"></a>
                                    <a href="#" class="uk-icon-button uk-icon-google-plus"></a>
                                </div>
                            </figcaption>
                        </figure>
                    </div>
                    <h2 class="uk-margin-bottom-remove">Name</h2>
                    <p class="uk-text-large uk-margin-top-remove uk-text-muted">Job Description</p>
                </div>
            </div>

            <hr class="uk-grid-divider">

            <div class="uk-grid" data-uk-grid-margin>

                <div class="uk-width-medium-2-3">
                    <div class="uk-panel uk-panel-header">

                        <h3 class="uk-panel-title">Get in touch</h3>

                        <form class="uk-form uk-form-stacked">

                            <div class="uk-form-row">
                                <label class="uk-form-label">Your Name</label>
                                <div class="uk-form-controls">
                                    <input type="text" placeholder="" class="uk-width-1-1">
                                </div>
                            </div>

                            <div class="uk-form-row">
                                <label class="uk-form-label">Your Email</label>
                                <div class="uk-form-controls">
                                    <input type="text" placeholder="" class="uk-width-1-1">
                                </div>
                            </div>

                            <div class="uk-form-row">
                                <label class="uk-form-label">Your Message</label>
                                <div class="uk-form-controls">
                                    <textarea class="uk-width-1-1" id="form-h-t" cols="100" rows="9"></textarea>
                                </div>
                            </div>

                            <div class="uk-form-row">
                                <div class="uk-form-controls">
                                    <button class="uk-button uk-button-primary">Submit</button>
                                </div>
                            </div>

                        </form>

                    </div>
                </div>

                <div class="uk-width-medium-1-3">
                    <div class="uk-panel uk-panel-box uk-panel-box-secondary">
                        <h3 class="uk-panel-title">Contact Details</h3>
                        <p>
                            <strong>Company Name</strong>
                            <br>Street, Country
                            <br>Postal Zip Code
                        </p>
                        <p>
                            <a>youremail@yourdomain.com</a>
                            <br><a>@YourTwitterAccount</a><br>
                            P+44 (0) 208 0000 000
                        </p>
                        <h3 class="uk-h4">Follow Us</h3>
                        <p>
                            <a href="#" class="uk-icon-button uk-icon-github"></a>
                            <a href="#" class="uk-icon-button uk-icon-twitter"></a>
                            <a href="#" class="uk-icon-button uk-icon-dribbble"></a>
                            <a href="#" class="uk-icon-button uk-icon-html5"></a>
                        </p>
                    </div>
                </div>
            </div>

        </div>

        <div id="offcanvas" class="uk-offcanvas">
            <div class="uk-offcanvas-bar">
                <ul class="uk-nav uk-nav-offcanvas">
                    <li>
                        <a href="layouts_frontpage.html">Frontpage</a>
                    </li>
                       <li>
                        <a href="layouts_portfolio.html">Portfolio</a>
                    </li>
                    <li>
                        <a href="layouts_blog.html">Blog</a>
                    </li>
                       <li>
                        <a href="layouts_documentation.html">Documentation</a>
                    </li>
                    <li class="uk-active">
                        <a href="layouts_contact.html">Contact</a>
                    </li>
                    <li>
                        <a href="layouts_login.html">Login</a>
                    </li>
                </ul>
            </div>
        </div>

    </body>
</html>